<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-button type="primary" @click='showAddCategoryDialog'>添加分类</el-button>
      <!-- tree-table用了vue-table-with-tree-grid插件，详情和用法在 vue-ui -- 依赖 -- 查看详情 -->
      <!-- selection-type表示在每一行之前是否有可选框 
            expand-type表示是否为展开行
            show-index表示展示索引
            border表示是否显示纵向边框-->
      <tree-table
        :data="cateList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        :show-index="true"
        :border="true"
      >
        <!-- 定义命名插槽 -->
        <!-- 第一列 -->
        <template slot='isOk' slot-scope="scope">
            <!-- 根据是否可以删除来显示第二列的图标状态 -->
            <i class='el-icon-success' v-if="scope.row.cat_deleted===false"></i>
            <i class='el-icon-error' v-else></i>
        </template>
        <!-- 第二列 -->
        <template slot="sort" slot-scope="scope">
            <el-tag v-if='scope.row.cat_level===0'>一级</el-tag>
            <el-tag v-else-if='scope.row.cat_level===1' type="success">二级</el-tag>
            <el-tag v-else type="danger">三级</el-tag>
        </template>
        <!-- 第三列 -->
        <template slot="operate" slot-scope="scope">
            <el-button icon="el-icon-edit" size="mini" type="primary" @click='editCategory(scope.row)'>编辑</el-button>
            <el-button icon="el-icon-delete" size="mini" type="danger" @click=removeCategory(scope.row)>删除</el-button>
        </template>
      </tree-table>
      <!-- 分页区 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 添加分类对话框 -->
      <el-dialog
        title="添加分类"
        :visible.sync="addCategoryDialogVisible"
        width="50%"
        @close='clearCategory'>
        <!-- 表单 -->
        <el-form :model="addCategoryForm" :rules="addCategoryFormRules" ref="addCategoryFormRef" label-width="100px">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCategoryForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类">
            <!-- 级联选择器 -->
            <!-- options表示数据源，props为配置，双向数据绑定是数组 -->
            <el-cascader
              v-model="selectedKeys"
              :options="parentCategoryList"
              :props="cascaderProps"
              @change="parentCategoryChange"
              clearable
              ></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCategoryDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategory">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
    <!-- 修改分类对话框 -->
      <el-dialog
        title="添加分类"
        :visible.sync="editCategoryDialogVisible"
        width="50%"
        @close='editCategoryDialogClose'>
        <!-- 表单 -->
        <el-form :model="editCategoryForm" :rules="editCategoryFormRules" ref="editCategoryFormRef" label-width="100px">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="editCategoryForm.cat_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="editCategoryDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSubmit">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Category',
  data() {
    return {
      // 保存全部商品分类信息（type=3）
      cateList: [],
      // 获取全部商品分类AJAX参数
      queryInfo: {
        // 获取所有分类
        type: 3,
        // 当前分类页码
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 3,
      },
      // 保存总页数
      total: 0,
      // 定义tree-table插件的列格式
      columns: [
        // 第一列配置
        {
          // 标题
          label: '分类名称',
          // 属性名   
          prop: 'cat_name',
        },
        // 第二列配置
        {
          label: '是否有效',
          // 当前列定义为模板列  
          type: 'template',
          // 表示这一列使用命名插槽的插槽名称是 isOk，命名插槽需要在 terr-table中定义
          template: 'isOk'
        },
        // 第三列配置
        {
            label:'分类排序',
            type:'template',
            template:'sort'
        },
        // 第四列配置
        {
            label:'操作',
            type:'template',
            template:'operate'
        }
      ],
      // 控制添加分类对话框是否出现
      addCategoryDialogVisible:false,
      // 添加分类表单验证对象
      addCategoryForm:{
        // 父级分类的id，默认是添加一级分类
        cat_pid:0,
        // 将要添加的分类名称
        cat_name:'',
        // 分类的等级，默认是一级分类
        cat_level:0
      },
      // 添加分类表单验证规则
      addCategoryFormRules:{
        cat_name:[
          {required:true,message:'请输入分类名称',trigger:'blur'},
          {min:1,max:5,message:'长度在 1 到 5 个字符',trigger:'blur'}
        ]
      },
      // 保存父级商品分类列表（type=2）
      parentCategoryList:[],
      // 保存级联选择器选中数据的id
      selectedKeys:[],
      // 级联选择器的配置选项
      cascaderProps:{
        // 次级菜单展开方式
        expandTrigger: 'hover',
        value:'cat_id',
        label:'cat_name',
        children:'children',
        // 父子(一级和二级不关联)节点不关联，这样才能选中一级分类
        checkStrictly:true
      },
      // 控制修改分类对话框是否出现
      editCategoryDialogVisible:false,
      // 保存修改分类数据
      editCategoryForm:{
        cat_name:''
      },
      // 修改分类验证规则
      editCategoryFormRules:{
        cat_name:[
          {required:true,message:'请输入分类名称',trigger:'blur'}
        ]
      }
    }
  },
  created() {
    // 获取商品分类列表
    this.getCateList()
  },
  methods: {
    // 获取全部商品分类列表
    async getCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: this.queryInfo,
      })
      if (res.meta.status !== 200)
        return this.$message.error('获取商品分类列表失败')
      // 保存商品分类列表
      this.cateList = res.data.result
      // 保存总数居条数
      this.total = res.data.total
      // console.log(res.data)
      console.log(this.cateList);
    },
    // 页面大小发生改变时触发
    handleSizeChange(newSize){
        // 改变参数
        this.queryInfo.pagesize=newSize
        // 重新发送请求
        this.getCateList()
    },
    // 页码发生变化时触发
    handleCurrentChange(newPage){
        this.queryInfo.pagenum=newPage
        this.getCateList()
    },
    // 添加分类按钮
    showAddCategoryDialog(){
      // 获取父级分类列表
      this.getParentCategoryList()
      this.addCategoryDialogVisible=true
    },
    // 获取父级分裂列表（type值为2）
    async getParentCategoryList(){
      const {data:res} = await this.$http.get('categories',{params:{type:2}})
      if(res.meta.status!==200) return this.$message.error('获取父级商品列表失败')
      // console.log(res.data);
      // 将数据保存
      this.parentCategoryList=res.data
    },
    // 当级联选择器发生变化时触发
    parentCategoryChange(){
      // console.log(this.selectedKeys);
      // console.log(this.addCategoryForm);
      // 如果要添加一级分类，则 addCategoryForm中的默认数据已经满足要求，不需要改变
      if(this.selectedKeys.length===0) return
      // 更新添加分类表单验证对象(获取最后的父级id)
      this.addCategoryForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
      // 等级更新，值正好就为数组长度
      this.addCategoryForm.cat_level=this.selectedKeys.length
    },
    // 点击确定时，表单预验证、提交更新数据
    addCategory(){
      this.$refs.addCategoryFormRef.validate(async (boolean)=>{
        if(!boolean) return this.$message.error('添加分类预校验失败')
        const {data:res} = await this.$http.post('categories',this.addCategoryForm)
        if(res.meta.status!==201) return this.$message.error('添加分类失败')
        // console.log(res.data);
        this.$message.success('添加分类成功')
        this.getCateList()
      })
      
      this.addCategoryDialogVisible = false
    },
    // 添加分类对话框关闭时，清空
    clearCategory(){
      // 清空输入框内容
      this.$refs.addCategoryFormRef.resetFields()
      // 清空id数组,第一个方法有延迟问题
      // this.selectedKeys.splice(0,this.selectedKeys.length)
      this.selectedKeys=[]
      // 重置 addCategoryForm
      this.addCategoryForm.cat_name=''
      this.addCategoryForm.cat_pid=0
      this.addCategoryForm.cat_level=0
    },
    // 编辑分类
    editCategory(row){
      console.log(row);
      this.editCategoryForm.cat_name=row.cat_name
      this.editCategoryForm.cat_id=row.cat_id
      this.editCategoryDialogVisible=true
    },
    // 修改对话框关闭
    editCategoryDialogClose(){
      // 清空
      this.$refs.editCategoryFormRef.resetFields()
    },
    // 点击确定，修改分类名称
    async editSubmit(){
      // 发送请求
      const {data:res} = await this.$http.put(`categories/${this.editCategoryForm.cat_id}`,{cat_name:this.editCategoryForm.cat_name})
      if(res.meta.status!==200) return this.$message.error('修改分类失败')
      this.getCateList()
      this.$message.success('修改分类成功')
      this.editCategoryDialogVisible=false
    },
    // 删除分类
    async removeCategory(row){
      const confirmResult = await this.$confirm('是否要删除此分类','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err)
      if(confirmResult!=='confirm') return this.$message.info('已经取消删除')
      // 发送请求
      const {data:res} = await this.$http.delete(`categories/${row.cat_id}`)
      if(res.meta.status!==200) return this.$message.error('商品分类删除失败')
      this.$message.success('此商品分类删除成功')
      this.getCateList()
    }
  },
}
</script>

<style scoped>
.el-button {
  margin-bottom: 15px;
}
.el-card {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
}
/* icon图标样式 */
.el-icon-success{
    color:lightgreen
}
.el-icon-error{
    color:red
}
.el-cascader{
  width: 100%;
}

</style>